<template>
    <div class="img-list-page" style="margin-top:25px;">
        <WaterfallFlowImgList :isuser="true" id="1" ref="refWaf" :defaultw="414" :list="data" :columns="6"/>
    </div>
</template>

<script>
import { mapState} from 'vuex'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'

import api from '@/api/api'

export default {
    name: 'homes',
    data() {
        return {
            gTypes:[],
            isFocus:false,
            model:'small',
            isCkAll:false,
            curViewidx:0,
            collectIds:[],
            gap:273,
            showFav:false,
            defaultColors:['#BFDA6D','#F3DE64','#F8A650','#E96248','#4D4D4D','#9DC6C8','#6998D0','#7368EE','#965C23','#DAA36D','#FFFFFF','#C36DDA'],
            curImgId:'',
            currentImgUrl:'',
            showInfo:false,
            scrollLoaded:false,
            hasMore:true,
            queryParams:{
                pageNum:1,
                pageSize:50,
                orderByColumn:'createTime',
                isAsc:'desc',
                rank:'首页推荐',
                color:'',
                categoryId:22
            },
            slickSettings: {
                slidesToShow: 7,
                slidesToScroll: 1,
                infinite: false
            },
            curFullPath:'',
            columns:5
        }
    },
    props:['data'],
    components: {WaterfallFlowImgList},
    computed: {
        ...mapState(['ishiddenbar']),
        selectIds(){
            let datas=this.list.filter(r=>{
                return r.selected
            });
            let ids=datas.map(item=>{
                return item.thumbnailBean.id;
            })
            this.isCkAll=ids.length==this.list.length;
            return ids;
        }
    },
    watch: {
        ishiddenbar(){
            let that=this;
            setTimeout(()=>{
                that.$refs['refWaf'].initLineGap();
            },150)
        }
    },
    methods: {
        handleCancelByGtypeAll(){
            this.gTypes.map(item=>{
                item.selected=false;
            })
            this.queryParams.categoryIds='';
            this.handleSearch();
        },
        handleConfirmByGTypeSearch(){
            let _categoryIds=[];
            this.gTypes.map(item=>{
                if(item.selected){
                    _categoryIds.push(item.value);
                }
            })
            this.queryParams.categoryIds=_categoryIds.join(',');
            this.handleSearch();
        },
        handleClear(_property){
            this.queryParams[_property]='';
            this.handleSearch();
        },
        chooseByColor(_clr){
            this.queryParams.imageColor=_clr;
            this.handleSearch();
        },
        chooseDevice(_device){
            this.queryParams.device=_device==this.queryParams.device?'':_device;;
            this.queryParams.pageNum=1;
            this.list=[];
            this.scrollLoaded=false;
            this.hasMore=true;
            this.queryList();
        },
        handleSearch(){
            this.queryParams.pageNum=1;
            this.list=[];
            this.scrollLoaded=false;
            this.hasMore=true;
            this.queryList();
        },
        chooseScreen(_screen){
            this.queryParams.orientation=_screen==this.queryParams.orientation?'':_screen;
            
            this.queryParams.pageNum=1;
            this.list=[];
            this.scrollLoaded=false;
            this.hasMore=true;
            this.queryList();
        },
        onInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showInfo=false;
        },
        handleShowInfo(_item,_idx){
            if(this.selectIds.length>0){
                _item.selected=!_item.selected;
                return;
            }
            this.curViewidx=_idx;
            this.curImgId=_item.thumbnailBean.id;
            this.currentImgUrl=_item.thumbnail;
            window.history.pushState({}, 0, '/imgv/'+_item.id+'?imgurl='+this.currentImgUrl);
            document.body.style.overflow='hidden';
            this.showInfo=true;
        },
        handleLoadingMore(){
            this.queryParams.pageNum++;
            this.queryList();
        },
        async queryList(){
            var that =  this;
            
            let result=await api.searchImages(that.queryParams);

            let old=that.list;
                
            let datas=result.data;
            datas.forEach(item=>{
                item.categoryTopId=item.articleCategoryTopId;
                item.articleid=item.articleId;
                item.src=item.content;
                item.thumbnail='https://img.gameui.net/'+item.id+'.webp';
                item.thumbnailBean.id=item.id;
                item.selected=false;
                item.sw=item.width;
                item.sh=item.height;

                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                item.lazy = {
                    src:that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
                let srcsets=[];
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp 1x');
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@2x560.webp 2x');
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@3x560.webp 3x');
                item.srcsets=srcsets.join(',');
            })

            that.list = [...old,...datas];

            that.total=result.total;

            if(result.data&&(result.data.length<that.queryParams.pageSize||result.data.length==0)){
                that.hasMore=false;
            }else{
                that.hasMore=true;
            }
            that.scrollLoaded=true;
        }
    },
    async mounted() {
        
    }
}

</script>

<style lang="less">
.img-list-page {
    .gp-filter{
        position: sticky;
        top:149px;
        padding-bottom:21px;
        padding-top:20px;
        margin-bottom:0px;
        margin-top:0px;
    }
    .nav-cates {
        list-style: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        padding-right: 80px;

        li {
            line-height: 44px;
            border-radius: 44px;
            text-align: center;
            width: auto !important;
            background: #1D1D1F;
            display: block !important;
            margin-right: 20px;
            color: #6A6976;

            a {
                display: inline-block;
                width: 100%;
                padding: 0px 26px;
                white-space: nowrap;
            }

            &:hover {
                background: #323232;
                color: #fff;
            }
        }
    }

    .cate-page-prev {
        background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        transform: rotate(180deg);
        z-index: 1;
        left: 0px !important;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .cate-page-next {
        background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        z-index: 1;
        right: 0px;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .img-datas {
        margin-top:0px;
        // padding-bottom: 100px;
    }
}
</style>